// components/Typewriter.tsx
import { useEffect, useState, useCallback } from "react";
import { Viewer } from "@bytemd/react";
import highlight from "@bytemd/plugin-highlight";
import gfm from "@bytemd/plugin-gfm";
const plugins = [gfm(), highlight()];
interface TypewriterProps {
  text: string;
  speed?: number;
  cursor?: string;
  onComplete?: () => void;
}

export const Typewriter = ({
  text,
  speed = 50,
  cursor = "▋",
  onComplete,
}: TypewriterProps) => {
  const [displayedText, setDisplayedText] = useState("");
  const [index, setIndex] = useState(0);

  const typeNextChar = useCallback(() => {
    if (index < text.length) {
      setDisplayedText((prev) => prev + text.charAt(index));
      setIndex((prev) => prev + 1);
    } else if (onComplete) {
      onComplete();
    }
  }, [index, text, onComplete]);

  useEffect(() => {
    const timer = setInterval(typeNextChar, speed);
    return () => clearInterval(timer);
  }, [typeNextChar, speed]);

  return (
    <span className="inline-typewriter">
      <Viewer value={displayedText} plugins={plugins}></Viewer>
      {/*<span className="cursor animate-blink">{cursor}</span>*/}
    </span>
  );
};
